<!-- 我的 -->
<template>
	<view class="wrap-me">
		<!-- 当前账号信息区域 -->
		<view class="user-info-box primary-bg-color">
			<!-- 已经登录 -->
			<view class="top-box">
				<view class="avatar-box">
					<u-avatar :src="userInfo.avatar"></u-avatar>
					<view v-if="userInfo">
						<text class="nickName-txt">{{ userInfo.nickname }}</text>
						<view class="nickName-txt">uid：{{ userInfo.id }}</view>
					</view>
					<view v-else class="authorize-text" @click="$utils.toPage('/pages/login/login')">
						请点击授权登录
					</view>
				</view>
				<view class="pad-24 setting-box">
					<u-icon name="setting-fill" color="#fff" size="24" @click="handleClickSetting"></u-icon>
				</view>
			</view>
		</view>
		<view class="banner-img-box">
			<image src="/static/banner3.jpg" class="banner-img"></image>
		</view>
		<view class="common-tools">
			<view class="tools-title">常用工具</view>
			<view class="tools-list">
				<view class="tools-item" @click="handleClickShare">
					<view class="icon-box">
						<u-icon name="share-fill" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						分享好友
					</view>
				</view>
				<view class="tools-item" @click="handleClickMyOrder">
					<view class="icon-box">
						<u-icon name="order" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						我的订单
					</view>
				</view>
				<view class="tools-item" @click="handleClickWindow">
					<view class="icon-box">
						<u-icon name="grid-fill" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						绑定视频号ID
					</view>
				</view>
			</view>
		</view>
		<view class="common-tools">
			<view class="tools-title">帮助与公告</view>
			<view class="tools-list">
				<view class="tools-item" @click="handleServerBtn">
					<view class="icon-box">
						<u-icon name="server-fill" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						客服
					</view>
				</view>
				<view class="tools-item" @click="handleClickItem">
					<view class="icon-box">
						<u-icon name="phone-fill" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						帮助中心
					</view>
				</view>
				<view class="tools-item" @click="handleClickItem">
					<view class="icon-box">
						<u-icon name="file-text-fill" color="#ccc" size="28"></u-icon>
					</view>
					<view class="txt">
						历史公告
					</view>
				</view>
			</view>
		</view>

		<!-- 客服电话 -->
		<u-popup :show="isShow" mode="bottom" @close="close" @open="open">
			<view class="drawer-content">
				<view class="tel-server" @click="handleClickServer">电话客服</view>
				<view class="line"></view>
				<view class="tel-server" @click="handleOnlineServer">联系在线客服</view>
				<view class="bg-black"></view>
				<view @click="toggleDrawer" class="btn">关闭</view>
			</view>
		</u-popup>
		<!-- 客服电话弹窗 -->
		<view class="server-pop" v-if="isShowPop">
			<view class="server-content">
				<view class="tel-num">可在手机端拨打18219129929</view>
				<view class="btn-box">
					<view class="cancle-btn" @click="handleCancle">取消</view>
					<view class="sure-btn" @click="copyToClipboard('18219129929')">复制到剪切板</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="bottom" @close="close2" @open="open2">
			<view class="title">
				<text>上传橱窗二维码</text>
			</view>
			<view class="upload-box">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
			</view>
			<view class="line"></view>
			<view class="popup-container">
				<view class="title">
					<text>视频号授权</text>
				</view>
				<view class="main-txt">
					<text>1、请确保当前登录微信视频号和需授权的视频号信息一致</text>
				</view>
				<view class="input-box">
					<u--input placeholder="请输入您的视频号ID" v-model="inputTxt"></u--input>
				</view>
				<view class="sub-txt">
					<text>2、视频ID获取方法：微信-我-视频号-右上角三个点头像-频号ID长按复制</text>
				</view>
				<view class="btn-box">
					<view class="cancle-btn" @click="close3">取消</view>
					<view class="sure-btn" @click="handleSure">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
const ENV_CONFIG = uni.envConfig;
// 接口的基础路径
const apiContextPath = ENV_CONFIG.baseUrl+"/supervisor";
export const apiContextPathSsbd = ENV_CONFIG.baseUrlSsbd;
import {
	mapState,
	mapActions
} from 'vuex';
export default {
	components: {},
	data() {
		return {
			formData: {
				avatar: '',
				nickname: '',
				id: '',
				openid: '',
				unionid: '',
				videoID: '',
			},
			qrcodeUrl: uni.envConfig.qrcodeUrl,
			isShow: false,
			isShowPop: false,
			show: false,
			inputTxt: '',
			fileList1: [],
			imgUrl: '',
		}
	},
	computed: {
		...mapState('user', {
			userInfo: 'userInfo',
		}),
	},
	mounted() {
		console.log('我的 coming')
		console.log(this.userInfo);
		this.formData.avatar = this.userInfo.avatar;
		// this.getUserInfo();
	},
	onShow() {
		console.log('onshow')
	},
	onLoad() {
		console.log(123);
	},
	methods: {
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result,
					})
				);
				fileListLen++;
				console.log(fileListLen++)
			}
		},
		// 上传图片
		uploadFilePromise(url, name) {
			console.log('url');
			console.log(url);
			uni.showLoading({
				mask: true,
				title: "图片上传中.."
			});
			let that = this;
			return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: apiContextPathSsbd + "api/file/formImage", // 仅为示例，非真实的接口地址
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
							uni.hideLoading();
							console.log(res);
							console.log(res.data);
							console.log(typeof res.data);
							let obj = JSON.parse(res.data);
							console.log(typeof obj);
							console.log(obj.data);
							this.imgUrl = obj.data.uri;
              setTimeout(() => {
								resolve(res.data.data);
								console.log(res.data.data);
              }, 1000);
            },
          });
        });
		},
		deletePic(event) {
			console.log(event);
			this[`fileList${event.name}`].splice(event.index, 1);
			this.imgUrl = '';
		},
		open2() {
			// console.log('open2');
		},
		close2() {
			// console.log('close2');
		},
		close3() {
			this.show = false
		},
		//保存视频号
		handleSure() {
			// sphLVjnq6ZQ5oA0   视频号ID
			console.log(this.imgUrl);
			if (this.imgUrl == '') {
				this.$u.toast('请上传橱窗二维码');
				return;
			}

			if (this.inputTxt == '') {
				this.$u.toast('请输入您的视频号ID');
				return;
			}


			uni.showLoading({
				mask: true,
				title: '数据提交中...'
			})

			let obj = {
				vid: this.inputTxt,
				qrcode: this.imgUrl,
			}
			this.$api.baseInfo.save(obj).then(res => {
				console.log(res);
				uni.hideLoading();
				uni.$u.toast(res.msg);
				this.show = false;
			})
		},
		//获取用户信息
		getUserInfo() {
			uni.showLoading({
				mask: true,
				title: '用户信息获取中...'
			})
			this.$api.baseInfo.getUserInfo().then(res => {
				console.log(res);
				uni.hideLoading();
				this.formData.id = res.data.id;
			})
		},
		handleOnlineServer() {
			uni.showToast({
				title: '功能完善中',
				icon: 'none'
			});
		},
		handleClickSetting() {
			if (!this.userInfo) {
				this.$utils.toPage('/pages/login/login');
			} else {
				this.$utils.toPage('/pages/me/baseInfo');
			}
		},
		handleClickWindow() {
			if (!this.userInfo) {
				this.$utils.toPage('/pages/login/login');
				return;
			}
			this.show = true;
		},
		handleClickMyOrder() {
			if (!this.userInfo) {
				this.$utils.toPage('/pages/login/login');
			} else {
				this.$utils.toPage('/pages/me/myOrder');
			}
		},
		toggleDrawer() {
			this.isShow = !this.isShow;
		},
		handleClickServer() {
			this.isShow = false;
			this.isShowPop = true;
		},
		handleCancle() {
			this.isShowPop = false;
		},
		previewQRCode() {
			uni.showLoading({
				title: '生成中'
			})
			const el = this.$refs['qrcode']
			console.log('el', this.$refs)
			el.make({
				success: () => {
					console.log('生成成功');
					el.toTempFilePath({
						success: res => {
							console.log('生成', res);
							uni.hideLoading()
							uni.previewImage({
								current: 0,
								urls: [res.tempFilePath],
								complete: (e) => {
									console.log(e)
								}
							})
						}
					})
				},
				fail: err => {
					console.log(err)
				}
			});

		},
		//功能开发中
		handleClickItem() {
			this.$u.toast('功能开发中,敬请期待');
		},
		handleClickShare() {
			if (!this.userInfo) {
				this.$utils.toPage('/pages/login/login');
			} else {
				uni.showLoading({
				mask: true,
				title: '用户信息获取中...'
			})
			this.$api.baseInfo.getUserInfo().then(res => {
				console.log(res);
				let wechatstore_order_count = res.data.wechatstore_order_count;
				// let wechatstore_order_count = 0;   //完成下单再分享二维码给到好友
				uni.hideLoading();
				this.$utils.toPage('/pages/me/customer/index');
				if (wechatstore_order_count > 0) {
					
				} else {
          uni.$u.toast('先完成下单,再分享二维码给好友');
				}
			})
			}
		},
		open() {

		},
		close() {

		},
		handleServerBtn() {
			this.isShow = true;
		},
		//复制剪切板
		copyToClipboard(text) {
			console.log(text);
			// 使用uni.setClipboardData API复制文本到剪切板
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
					this.isShowPop = false;
				},
				fail: function () {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.authorize-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #fff;
	margin-left: 20rpx;
}

.user-info-box {
	background: linear-gradient(135deg, #f50d19 0%, #FF6B6B 100%);
	padding: 30rpx;
	padding-bottom: 50rpx;
	position: relative;
	flex-shrink: 0;
	padding: 24rpx 24rpx 60rpx 24rpx;
	height: 200rpx;
}

.common-tools {
	margin: 20rpx;
}

.tools-title {
	font-weight: 600;
	margin-bottom: 30rpx;
	font-size: 28rpx;
}

.tools-list {
	background: #fff;
	height: 180rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tools-item {
	flex: 1;
	text-align: center;
}

.icon-box {
	flex-direction: column-reverse;
}

::v-deep .u-icon--right {
	flex-direction: column-reverse !important;
}

.txt {
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #000;
}

.banner-img-box {
	margin: 20rpx;
}

.banner-img {
	width: 100%;
	height: 210rpx;
	border-radius: 20rpx;
}

.top-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.avatar-box {
	display: flex;
	align-items: center;
}

.nickName-txt {
	color: #fff;
	margin-left: 20rpx;
	font-size: 26rpx;
}

.drawer-content {
	padding: 0px;
}

.line {
	width: 100%;
	border-bottom: 1rpx solid #eee;
}

.tel-server {
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 32rpx;
}

.bg-black {
	width: 100%;
	height: 10rpx;
	background: #eee;
}

.btn {
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 32rpx;
}

.server-pop {
	position: fixed;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.server-content {
	width: 600rpx;
	height: 300rpx;
	background-color: #fff;
	margin: auto;
	border-radius: 30rpx;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #eee;
}

.tel-num {
	text-align: center;
	margin: 60rpx auto;
	font-size: 36rpx;
}

.btn-box {
	margin: 0 30rpx;
	display: flex;
}

.btn-box view {
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
}

.cancle-btn {
	flex: 1;
	background: #eee;
	margin-right: 20rpx;
}

.sure-btn {
	flex: 1;
	background: #07c160;
	color: #fff;
	margin-left: 20rpx;
}

.popup-container {
	padding: 0rpx 30rpx 100rpx;

}

.title {
	text-align: center;
	font-size: 28rpx;
	margin: 30rpx 0;
}

.main-txt {
	font-size: 28rpx;
}

.sub-txt {
	font-size: 26rpx;
	margin-bottom: 30rpx;
}

.btn-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-box view {
	width: 200rpx;
	height: 68rpx;
	background: #ddd;
	text-align: center;
	line-height: 68rpx;
	margin-left: 20rpx;
	color: #fff;
	font-size: 28rpx;
	border-radius: 10rpx;
}

.btn-box .sure-btn {
	background: #F4030F;
}

.input-box {
	border-bottom: 1rpx solid #eee;
	margin-bottom: 20rpx;
}

::v-deep .u-input {
	background-color: none;
}

.upload-box {
	margin: 0 auto;
}

.line {
  border-bottom: 1rpx dashed #eee;
}
</style>
